<template>
  <basic-container>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-setting"></i> 员工管理
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <i class="el-icon-date"></i> 详情
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <avue-detail ref="form" v-model="form" :option="option">
      <template slot-scope="scope" slot="avatarForm">
        <el-image style="width: 100px; height: 100px" :src="form.avatar"></el-image>
      </template>
      <template slot-scope="scope" slot="deptIdForm">{{form.deptName}}</template>
      <template slot="roleIdsForm" slot-scope="scope">
        <avue-select
          v-model="role"
          :dic="rolesOptions"
          :props="roleProps"
          multiple
          placeholder="请选择角色"
        />
      </template>
      <template slot="areaSnsForm" slot-scope="scope">
        <div style="display: inline-block">
          <avue-input-tree
            v-model="areaSnList"
            :dic="areaTreeData"
            :props="areaProps"
            type="tree"
            multiple
            placeholder="请选择区域"
          />
        </div>
      </template>
    </avue-detail>
  </basic-container>
</template>

<script>
import { getObj } from "@/api/crm/marketemployee";
import { deptRoleList } from "@/api/admin/role";
import { formOption } from "@/const/crud/crm/form_option/employee";
import { areaTree } from "@/api/crm/area";

export default {
  data() {
    return {
      form: {},
      role: [],
      areaSnList: [],
      option: formOption,
      treeDeptData: [],
      rolesOptions: [],
      areaTreeData: [],
      roleProps: {
        label: "roleName",
        value: "roleId"
      },
      areaProps: {
        label: "areaName",
        value: "areaSn"
      }
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => vm.getDetail(vm.$route.query.res.id));
  },

  created() {
    this.fetchAreaTree()
  },
  methods: {
    fetchAreaTree() {
      areaTree().then(res => {
        console.log(res)
        this.areaTreeData = res.data.data;
      });
    },
    getDetail (id) {
      
      getObj(id).then(res=>{
          console.log(res.data.data);
          this.form = res.data.data;
          this.role = this.form.roleList;
          this.areaSnList = this.form.areaSnList;
          this.form.deptId = this.form.deptId ? Number(this.form.deptId) : null;
          this.getNodeData();
      })
    },
    getNodeData() {
        
      deptRoleList().then(res => {
        this.rolesOptions = res.data.data.filter(
          item => item.roleCode.toUpperCase() !== "ROLE_ADMIN"
        );
      });
    }
  }
};
</script>

<style scoped lang="scss">
.crumbs {
  margin: 20px 10px;
}
</style>


